<template>
  <div class="home">
    <nav-bar :isUpper="false">
      <div class="header-container" slot="extra">
        <div class="address" @click="$router.push('/selectAddress')">
          <i class="iconfont icon-dizhi"></i>
          <span>{{ '请选择地址' }}</span>
        </div>
        <div class="search">
          <i class="iconfont icon-sousuo"></i>
          <input
            type="text"
            placeholder="请输入商家名称"
            @click="$router.push('/search')"
          />
        </div>
      </div>
    </nav-bar>
    <screen v-show="isTabFixe" class="fixed" />
    <div class="container my-position">
      <scroll class="content" ref="scrollRef" @scroll="scroll" :type="3">
        <div>
          <category-bar :categoryItems="categoryList" />
          <h3 class="title">附近商家</h3>
          <screen ref="screenRef" />
          <shop-list :shop="shopList" />
        </div>
      </scroll>
    </div>
    <main-tab-bar />
    <transition name="loading">
      <v-loading v-if="showLoading" />
    </transition>
    <main-tab-bar />
  </div>
</template>

<script>
import categoryBar from './children/CategoryBar.vue';
import Screen from '@/components/content/screen/Screen.vue';
import ShopList from '@/components/content/shoplist/ShopList.vue';
import Scroll from '@/components/common/scroll/Scroll.vue';

import { getShopList, hotCategory } from '@/network/getData';
import { mapMutations } from 'vuex';

export default {
  data() {
    return {
      showLoading: true,
      categoryList: [],
      isTabFixe: false,
      shopList: [], // 店铺列表
      offset: 0, // 页数
      tabTop: 0, // 选项卡位置
      addressInfo: {}
    };
  },
  async mounted() {
    // const address = await getUserAddress();
    // this.addressInfo = address.data;
    // this.SAVE_LOCATION(address.data);
    this.initData();
  },
  methods: {
    ...mapMutations(['SAVE_LOCATION']),
    initData() {
      // 获取食品分类
      hotCategory().then(res => {
        const arr = [];
        for (let i = 0; i < 2; i++) {
          arr[i] = res.data.splice(0, 8);
        }
        this.categoryList = arr;
      });
      getShopList(this.addressInfo.lng, this.addressInfo.lat, this.offset).then(
        res => {
          this.shopList = res.data;
          this.showLoading = false;
          this.$nextTick(() => {
            this.$refs.scrollRef.refresh();
            this.tabTop = this.$refs.screenRef.$el.offsetTop;
          });
          // setTimeout(() => {
          //   // 询问地址
          //   this.$confirm({
          //     title: `你当前的位置是：${this.addressInfo.name}`,
          //     confirmText: '是的',
          //     cancelText: '手动选择'
          //   }).then(res => {
          //     if (res === 'cancel') {
          //       this.$router.push();
          //     }
          //   });
          // }, 1500);
        }
      );
    },
    // 滚动
    scroll(position) {
      var y = Math.abs(position.y);
      this.isTabFixe = y >= this.tabTop;
    }
  },
  components: {
    categoryBar,
    Screen,
    Scroll,
    ShopList
  }
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  .container {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 45px;
  }
}
.fixed {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 1px 3px 0px #ccc;
  background-color: #fff;
}
.content {
  height: 100%;
  overflow: hidden;
  .title {
    padding: 0 8px;
    margin: 10px 0 5px;
    color: #000;
  }
}
.header-container {
  display: flex;
  .address {
    flex: 40%;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size);
    margin-right: 15px;
    color: #222;
  }
  .search {
    position: relative;
    height: 30px;
    width: 100%;
    input {
      width: 100%;
      height: 100%;
      border-radius: 15px;
      text-indent: 25px;
      color: var(--color-text);
      font-size: var(--font-size);
    }
    i {
      position: absolute;
      top: 2px;
      left: 8px;
      font-size: var(--font-size);
      color: #999;
    }
  }
}
</style>
